
<template>
  <div class="homeDiv">
      <appleCardVue class="mb4"></appleCardVue>
      <recommendCardVue class="mb4"></recommendCardVue> 
      <forYouCardVue class="mb4"></forYouCardVue>
      <StarCardVue class="mb4"></StarCardVue>
      <appleCardVue class="mb4"></appleCardVue>
      <recommendCardVue class="mb4"></recommendCardVue> 
  </div>
</template>


<script lang="ts">
import { defineComponent} from "@vue/runtime-core";
import appleCardVue from "../../components/card/appleCard.vue";
import recommendCardVue from "../../components/card/recommendCard.vue";
import forYouCardVue from "../../components/card/forYouCard.vue";
import StarCardVue from "../../components/card/StarCard.vue";

  export default defineComponent({
     name:"home",
     components:{appleCardVue,recommendCardVue,forYouCardVue,StarCardVue},
     setup(){
      return{
          
      }
     }
  })
</script>

<style lang="less" scoped>
.homeDiv{
    margin-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
  }

</style>
